<template>
  <div class="form-container" v-loading="loading">
    <el-form size="mini" ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item prop="contact_name" label="姓名">
        <el-input v-model="form.contact_name" placeholder="请填写姓名"></el-input>
      </el-form-item>
      <el-form-item prop="sex" label="性别">
        <el-radio-group v-model="form.sex">
          <el-radio label="1">男</el-radio>
          <el-radio label="2">女</el-radio>
          <el-radio label="0">未知</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="company_phone" label="电话">
        <el-input v-model="form.company_phone" placeholder="请填写电话"></el-input>
      </el-form-item>
      <el-form-item prop="wx_code" label="微信号">
        <el-input v-model="form.wx_code" placeholder="请填写微信号"></el-input>
      </el-form-item>
      <el-form-item prop="qq_code" label="QQ号">
        <el-input v-model="form.qq_code" placeholder="请填写QQ号"></el-input>
      </el-form-item>
      <el-form-item prop="email" label="邮箱">
        <el-input v-model="form.email" placeholder="请填写邮箱"></el-input>
      </el-form-item>
      <el-form-item>
        <div class="line">
          <el-button size="mini" @click="onCancel">取消</el-button>
          <el-button size="mini" type="primary" @click="onSubmit">提交</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { isEmail, isPhone, isMobile } from '@/utils/validate'
import { apiAddPhone } from '@/api/customer'

export default {
  props: { id: { type: String, default: '' } },
  data() {
    var validaPhone = (rule, value, callback) => {
      if (value && !isMobile(value) && !isPhone(value)) {
        callback(new Error('电话格式错误'))
      } else {
        callback()
      }
    }
    var validaEmail = (rule, value, callback) => {
      if (value && !isEmail(value)) {
        callback(new Error('邮箱格式错误'))
      } else {
        callback()
      }
    }
    return {
      form: {
        contact_name: '',
        sex: '',
        company_phone: '',
        wx_code: '',
        qq_code: '',
        email: '',
      },
      rules: {
        company_phone: [
          { required: true, message: '请填写电话', trigger: 'blur' },
          { validator: validaPhone, trigger: 'blur' },
        ],
        email: [{ validator: validaEmail, trigger: 'blur' }],
      },
      loading: false,
    }
  },
  computed: {},
  mounted() {},
  methods: {
    // 保存
    onSubmit() {
      this.$refs.form.validate((flag) => {
        if (flag) {
          this.loading = true
          const formData = new FormData()
          for (let key in this.form) {
            formData.set(key, this.form[key])
          }
          formData.set('id', this.id)
          apiAddPhone(formData)
            .then((res) => {
              this.loading = false
              if (res.code !== 200) {
                return
              }
              this.$message({
                message: '添加成功！',
                type: 'success',
              })
              setTimeout(() => {
                this.$emit('success')
              }, 1000)
            })
            .catch(() => {
              this.loading = false
            })
        }
      })
    },
    // 取消
    onCancel() {
      this.$emit('close')
    },
  },
}
</script>
<style lang="scss" scoped>
.form-container {
  padding: 0 24px;
}
.el-input {
  width: 100% !important;
}
.line {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
</style>
<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}
input[type='number'] {
  -moz-appearance: textfield;
}
</style>
